<template>
  <div>
    <a-card :bordered="false">
      <div class="table-page-search-wrapper">
        <a-form layout="inline">
          <a-row :gutter="48">
            <!-- 经办日期 -->
            <a-col :md="8" :sm="24">
                  <a-form-item label="作废日期">
                    <a-range-picker @change="handleChangeFei" style="width:80%;" :disabled-date="disabledDate"/>
                  </a-form-item>
            </a-col>
            <!-- 经办日期 -->
            <a-col :md="8" :sm="24">
                  <a-form-item label="经办日期">
                    <a-range-picker @change="handleChangeHandling" style="width:80%;" :disabled-date="disabledDate"/>
                  </a-form-item>
            </a-col>
            <!-- 项目 -->
            <a-col :md="8" :sm="24">
                  <a-form-item label="项目:">
                    <a-select v-model="searchData.project_id" allowClear placeholder="请选择业项目" style="width:80%;" @change="$refs.table.refresh()">
                      <a-select-option v-for="(item,index) in projectList" :key="index" :value="item.id" >{{ item.name }}</a-select-option>
                    </a-select>
                  </a-form-item>
            </a-col>
            <!-- 收支类型 -->
            <a-col :md="8" :sm="24">
                    <a-form-item label="收支类型">
                      <a-checkbox @change="typeChange2" :checked="searchData.type==2">收入</a-checkbox>
                      <a-checkbox @change="typeChange1" :checked="searchData.type==1">支出</a-checkbox>
                    </a-form-item>
              </a-col>

            <div v-if="advanced">
              <!-- 支付方式 -->
              <a-col :md="8" :sm="24">
                    <a-form-item label="支付方式:">
                      <a-select v-model="searchData.charge_type" allowClear placeholder="请选择支付方式" style="width:80%;" @change="$refs.table.refresh()">
                        <a-select-option v-for="(item,index) in payList" :key="index" :value="item.id">{{ item.name }}</a-select-option>
                      </a-select>
                    </a-form-item>
              </a-col>
              <!-- 账户 -->
              <a-col :md="8" :sm="24">
                    <a-form-item label="账户:">
                      <a-select v-model="searchData.account_id" allowClear placeholder="请选择业账户" style="width:80%;" @change="$refs.table.refresh()">
                        <a-select-option v-for="(item,index) in accountsList" :key="index" :value="item.id" >{{ item.name }}</a-select-option>
                      </a-select>
                    </a-form-item>
              </a-col>
               <!-- 经办人 -->
              <a-col :md="8" :sm="24">
                    <a-form-item label="经办人:">
                      <a-input v-model="searchData.operator" placeholder="搜索经办人(回车搜索)"  style="width:80%;" @pressEnter="$refs.table.refresh()" >
                        <a-tooltip slot="suffix" title="请搜索经办人">
                          <a-icon type="search" style="color: rgba(0,0,0,.45)" @click="$refs.table.refresh()" />
                        </a-tooltip>
                      </a-input>
                    </a-form-item>
              </a-col>
              <a-col :md="8" :sm="24">
                <a-form-item label="订单号:">
                  <a-input v-model="searchData.order_no" placeholder="搜索订单号(回车搜索)"  style="width:80%;" @pressEnter="$refs.table.refresh()" >
                    <a-tooltip slot="suffix" title="请搜索订单号">
                      <a-icon type="search" style="color: rgba(0,0,0,.45)" @click="$refs.table.refresh()" />
                    </a-tooltip>
                  </a-input>
                </a-form-item>
              </a-col>
              <!-- 创建日期 -->
              <a-col :md="8" :sm="24">
                    <a-form-item label="创建日期">
                      <a-range-picker @change="handleChangeCreate" style="width:80%;" :disabled-date="disabledDate"/>
                    </a-form-item>
              </a-col>

            </div>

          </a-row>
        </a-form>
      </div>
      <a style="cursor: pointer" v-if="advanced" @click="advanced=!advanced" id="moreButton">
        收起
        <a-icon type="up"></a-icon>
      </a>
      <a style="cursor: pointer" v-if="!advanced" @click="advanced=!advanced" id="moreButton">
        展开
        <a-icon type="down"></a-icon>
      </a>
      <s-table ref="table" size="default" rowKey="key" :columns="columns" :data="tableData" :scroll="{ x: '100%' }" style="margin-top: 10px" class="user_management_table" :pagination="pagination">
        <span slot="abolition_time" slot-scope="text, record">
           {{Utils.formatDate('Y-m-d H:i',record.order.abolition_time)}}
        </span>

        <span slot="type" slot-scope="text, record">
          <span v-if="record.type==1">支出</span>
          <span v-if="record.type==2">收入</span>
        </span>

        <span slot="money" slot-scope="text, record">
          <span v-if="record.type==2">+</span>
          <span v-if="record.type==1">-</span>
          {{record.money}}
        </span>

        <span slot="project" slot-scope="text, record">
          {{record.project?record.project.name:'--'}}
        </span>
        <span slot="charge_type" slot-scope="text, record">
          <span v-if="record.charge_type==1">支付宝</span>
          <span v-if="record.charge_type==2">微信</span>
          <span v-if="record.charge_type==3">现金</span>
          <span v-if="record.charge_type==4">网银</span>
          <span v-if="record.charge_type==5">pos机</span>
          <span v-if="record.charge_type!=1&&record.charge_type!=2&&record.charge_type!=3&&record.charge_type!=4&&record.charge_type!=5">--</span>
        </span>

        <span slot="account" slot-scope="text, record">
          {{record.account?record.account.name:'--'}}
        </span>
        
        <span slot="order" slot-scope="text, record">
          <a @click="jump('orderdetails',{id:record.order.id})" v-if="record.order">{{ record.order.order_no }}</a>
          <span v-else>--</span>
        </span>
        <span slot="operator" slot-scope="text, record">
          {{record.order?record.order.operator:'--'}}
        </span>
        <span slot="remark" slot-scope="text, record">
          {{record.remark?record.remark:'--'}}
        </span>
     
        
      </s-table>
    </a-card>

  </div>
</template>
<script>
import {incomeExpenses,incomeExpensesAdd,incomeExpensesEdit,incomeExpensesDel,expenseProjects,expenseAccounts} from '@/api/finance'
import moment from 'moment'
import { STable } from '@/components'
export default {
  components: { STable,},
  data() {
    return { 
      advanced:false,
      projectList:[],  //项目列表
      accountsList:[], //账户
      searchData:{
        is_void:1, //是否作废
        void_start_time:undefined,
        void_start_time:undefined,
        handling_start_date:'',//经办日期
        handling_end_date:'',//经办日期
        project_id:undefined,//项目id
        charge_type:undefined,  //支付方式
        type:undefined, //收支类型
        account_id:undefined, //账户id
        operator:undefined,  //经办人
        order_no:undefined, //订单号
        create_end_time:'',
        create_start_time:'',
        school_id:this.$store.state.user.school,
      },
      payList:[
        {name:'支付宝',id:1},{name:'微信',id:2},{name:'现金',id:3},{name:'网银',id:4},{name:'pos机',id:5}
      ],
      tableData: (parameter) => {
        return incomeExpenses(Object.assign(parameter, this.searchData)).then((res) => {
          return res
        })
      },
      columns: [
        {
          title: '废除日期',
          dataIndex: 'abolition_time',
          width:150,
          scopedSlots: { customRender: 'abolition_time' },
          fixed: 'left',
        },
        {
          title: '经办日期',
          dataIndex: 'handling_date',
          width:110,
          fixed: 'left',
        },
        {
          title: '项目',
          dataIndex: 'project',
          scopedSlots: { customRender: 'project' },
          width:110,
          ellipsis: true,
        },
        {
          title: '收支类型',
          dataIndex: 'type',
          scopedSlots: { customRender: 'type' },
          width:110,
          ellipsis: true,
        },
        {
          title: '收支金额(元)',
          dataIndex: 'money',
          width:130,
          ellipsis: true,
          scopedSlots: { customRender: 'money' },
        },
        {
          title: '支付方式',
          dataIndex: 'charge_type',
          scopedSlots: { customRender: 'charge_type' },
          width:110,
          ellipsis: true,
        },
        {
          title: '账户',
          dataIndex: 'account',
          scopedSlots: { customRender: 'account' },
          width:110,
          ellipsis: true,
        },
        {
          title: '经办人',
          dataIndex: 'operator',
          scopedSlots: { customRender: 'operator' },
          width:110,
          ellipsis: true,
        },
        {
          title: '关联订单号',
          dataIndex: 'order',
          scopedSlots: { customRender: 'order' },
          width:220,
        },
        {
          title: '创建时间',
          dataIndex: 'created_at',
          width:150,
          ellipsis: true,
        },
        {
          title: '备注',
          dataIndex: 'remark',
          scopedSlots: { customRender: 'remark' },
          width:110,
          ellipsis: true,
        },
       
      ],
      pagination: {
        showTotal: (total) => `共${total}条数据`,
      },
    }
  },
  mounted() {
    this.expenseProjects()
    this.expenseAccounts()
  },
  methods: {
    //项目列表
    expenseProjects(){
      expenseProjects({pageSize: 999999999,school_id:this.$store.state.user.school})
      .then((res) => {
        this.projectList = res.data
        this.$forceUpdate()
      })
      .catch((err) => {
        this.$message.error(err.data.message || '获取项目列表失败')
      })
    },
    //账户列表
    expenseAccounts() {
      this.tableLoading = true
      expenseAccounts({ pageSize: 999999,school_id:this.$store.state.user.school }).then(res => {
        this.accountsList = res.data
        this.$forceUpdate()
      }).catch((err) => {
        this.$message.error(err.data.message || '获取账户列表失败')
      })
    },
   // 支付时间
    disabledDate (current) {
      return current && current > moment().endOf('day')
    },
    handleChangeHandling (value, date) {
      this.searchData.handling_start_date = date[0]
      this.searchData.handling_end_date = date[1]
       this.$refs.table.refresh()
    },
    handleChangeFei(value, date){
      this.searchData.void_start_time = date[0]
      this.searchData.void_end_time = date[1]
      this.$refs.table.refresh()
    },
    handleChangeCreate(value, date){
      this.searchData.create_start_time = date[0]
      this.searchData.create_end_time = date[1]
      this.$refs.table.refresh()
    },
    typeChange1(e) {
      if (e.target.checked == true) {
        this.searchData.type = 1
      } else {
        this.searchData.type=undefined
      }
      this.$refs.table.refresh()
    },
    typeChange2(e) {
      if (e.target.checked == true) {
        this.searchData.type = 2
      } else {
        this.searchData.type=undefined
      }
      this.$refs.table.refresh()
    }
  },
  
}
</script>
<style lang="less">

</style>